<template>
  <el-dialog-com
    width="60%"
    title="添加角色"
    emitName="dialogClose"
    @dialogClose="dialogClose"
    checkName="addUserFormCheckFunc"
    @addUserFormCheckFunc="addUserFormCheckFunc"
    ref="addUserDialogRef"
  >
    <template v-slot:main>
      <!-- Form表单 -->
      <el-form
        :model="roleAddUserInfo"
        :rules="rules"
        ref="roleAddUserInfoFormRef"
        label-width="100px"
      >
        <!-- 用户名 -->
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleAddUserInfo.roleName"></el-input>
        </el-form-item>

        <!-- 角色描述 -->
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="roleAddUserInfo.roleDesc"></el-input>
        </el-form-item>

        <!-- 角色-权限关联 -->
        <el-form-item label="选择权限" prop="permissions">
          <el-cascader v-model="roleAddUserInfo.permissions" :options="permissions" :props=" {multiple: true}" />
        </el-form-item>
      </el-form>
    </template>
  </el-dialog-com>
</template>

<script>
// 引入组件
import ElDialogCom from '@/components/common/ElDialogCom'

// 网络
import { addRole } from '@/network/roleControlRequest';
import { getAllPermissions } from '@/network/roleControlRequest';

export default {
  data() {
    return { 
      permissions: [],
      roleAddUserInfo: {
        roleName: '',
        roleDesc: '',
        permissions: []
      },
      rules: {
        // 表单校验规则
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        permissions: [{ required: true, message: '填写选择内容', trigger: 'change' }]
      }
    }
  },
  methods: {
    /**
     * 关闭dialog组件后清空表单
     */
    dialogClose() {
      this.$refs['roleAddUserInfoFormRef'].resetFields()
    },

    /**
     * 添加角色
     */
    async addUserFormCheckFunc() {
      // 提交事件触发验证 通过即 发送网络请求
      let flag = false // 是否成功验证标志
      this.$refs['roleAddUserInfoFormRef'].validate(val => {
        if (!val) {
          flag = !flag
          return this.$message.warning('请按照提示填写完整')
        }
      })
      if (flag) { return; }

      // 请求参数修正
      const permissions = [];
      this.roleAddUserInfo.permissions.forEach(item => {
        permissions.push({id: item[0]});
      })
      this.roleAddUserInfo.permissions = permissions;
      
      // 发送网络请求
      const { meta } = await addRole(this.roleAddUserInfo)
      // console.log(data, meta);
      if (meta.status !== 200) {
        console.log(meta)
        this.$message.error(meta.msg)
        return (this.$refs['addUserDialogRef'].$data.dialogVisible = false)
      }
      this.$bus.$emit('getRole')
      this.$message.success(meta.msg)
      // 修改公共组件的开启关闭属性
      return (this.$refs['addUserDialogRef'].$data.dialogVisible = false)
    },
    
    /**
     * 查询所有的权限
     */
    async getPermissions() {
      const { data, meta } = await getAllPermissions();
      if (meta.status != 200) { return this.$message(meta.msg); }
      data.permissions.forEach(item => this.permissions.push({
        value: item.id,
        label: item.permissionName
      }));
    }
  },
  created() {
    // console.log('获取请求');
    this.getPermissions();
  }, 
  components: {
    ElDialogCom
  }
}
</script>

<style lang="scss" scoped>
</style>